<template>
  <el-card class="content-section">
    <div class="section-header">
      <div class="section-info">
        <h2 class="section-title">核心指标概览</h2>
      </div>
      <div class="update-info">
        <span class="update-frequency" @click="refreshData">每日更新</span>
        <span class="last-updated">更新于: {{ updateTime }}</span>
      </div>
    </div>
    <div class="tag-overview" v-loading="loading">
      <!-- 医院标签统计 -->
      <el-card class="tag-type-card">
        <div class="tag-type-header">
          <span class="tag-type-title">医院标签</span>
          <el-tag type="primary">全院可用</el-tag>
        </div>
        <div class="tag-type-stats">
          <div>
            <div class="stat-item">
              <div class="stat-value">{{ formatNumber(cardData.hospitalGroupIds) }}</div>
              <div class="stat-label">标签组数量</div>
            </div>
          </div>
          <div>
            <div class="stat-item">
              <div class="stat-value">{{ formatNumber(cardData.hospitalTagIds) }}</div>
              <div class="stat-label">标签总数</div>
            </div>
          </div>
          <div>
            <div class="stat-item">
              <div class="stat-value">{{ formatNumber(cardData.distinctHospitalTagCustomerIds) }}</div>
              <div class="stat-label">标签下患者数</div>
            </div>
          </div>
        </div>
      </el-card>

      <!-- 个人标签统计 -->
      <el-card class="tag-type-card">
        <div class="tag-type-header">
          <span class="tag-type-title">个人标签</span>
          <el-tag type="success">个人可用</el-tag>
        </div>
        <div class="tag-type-stats">
          <div>
            <div class="stat-item">
              <div class="stat-value">{{ formatNumber(cardData.personaGroupIds) }}</div>
              <div class="stat-label">标签组数量</div>
            </div>
          </div>
          <div>
            <div class="stat-item">
              <div class="stat-value">{{ formatNumber(cardData.personaTagIdList) }}</div>
              <div class="stat-label">标签总数</div>
            </div>
          </div>
          <div>
            <div class="stat-item">
              <div class="stat-value">{{ formatNumber(cardData.distinctPersonaTagIds) }}</div>
              <div class="stat-label">标签下患者数</div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </el-card>
</template>

<script>
import { getHospitalTagOverview } from '@/api/chenlong.js'
export default {
  name: 'Overview',
  data() {
    return {
      loading: true,
      updateTime: '--',
      cardData: {
        "hospitalGroupIds": 0,   //医院标签组数量
        "hospitalTagIds": 0,      //医院标签总数
        "distinctHospitalTagCustomerIds": 0,   //医院标签下患者数
        "personaGroupIds": 0,   //个人标签组数量
        "personaTagIdList": 0,  //个人标签总数
        "distinctPersonaTagIds": 0  //个人标签下患者数
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData(refresh = false) {
      try {
        this.loading = true
        const params = refresh ? { refresh: 'refresh' } : {}
        const res = await getHospitalTagOverview(params)
        if (res.code == 200) {
          this.cardData = res.data
          // 更新时间为当前时间
          this.updateTime = this.formatCurrentTime()
          if (refresh) {
            this.$message.success('数据已刷新')
          }
        } else {
          this.$message.error('获取数据失败')
        }
      } catch (error) {
        console.error('获取数据出错:', error)
        this.$message.error('获取数据出错')
      } finally {
        this.loading = false
      }
      console.log(">>>", this.cardData);
    },
    refreshData() {
      this.getData(true)
    },
    formatNumber(num) {
      if (num >= 1000) {
        return (num / 1000).toFixed(1) + 'k'
      }
      return num.toString()
    },
    formatCurrentTime() {
      const now = new Date()
      const year = now.getFullYear()
      const month = String(now.getMonth() + 1).padStart(2, '0')
      const day = String(now.getDate()).padStart(2, '0')
      const hours = String(now.getHours()).padStart(2, '0')
      const minutes = String(now.getMinutes()).padStart(2, '0')
      return `${year}.${month}.${day} ${hours}:${minutes}`
    }
  }
}
</script>

<style lang="scss" scoped>
.content-section {
  background: #ffffff;
  border-radius: 8px;
  padding: 20px 20px 0 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #dddddd;
}

.section-title {
  font-size: 23px;
  font-weight: 600;
  margin: 0;
  border-left: 4px solid #4a90e2;
  padding-left: 12px;
}

.update-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #888888;
  font-size: 12px;
}

.update-frequency {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(74, 144, 226, 0.1);
  border-radius: 4px;
  white-space: nowrap;
  font-size: 16px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    background-color: #409eff;
    color: #ffffff;
    transform: scale(1.05);
  }
}

.update-frequency::before {
  content: "⟳";
  font-size: 17px;
}

.last-updated {
  font-size: 15px;
  white-space: nowrap;
}

.tag-overview {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.tag-type-card {
  background: #ffffff;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #dddddd;
}

.tag-type-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.tag-type-title {
  font-size: 21px;
  font-weight: 600;
}

.tag-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 15px;
  color: white;
}

.tag-badge.hospital {
  background-color: #4a90e2;
}

.tag-badge.personal {
  background-color: #50e3c2;
}

.tag-type-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.stat-item {
  text-align: center;
  padding: 12px;
  background: #f4f7fc;
  border-radius: 8px;
}

.stat-value {
  font-size: 27px;
  font-weight: 700;
  color: #4a90e2;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 17px;
  color: #888888;
}
</style>
